<template>
  <div class="fl-wrap" v-loading="loading">
    <div class="flow-container" ref="flowContainer"></div>
    <io-panel :lf="lf"></io-panel>
  </div>
</template>

<script>
import { getWfView } from '@/credit/mixin/wf'
import { loadLogicFlow } from '@/common/plugins/tools/logicflow'
import { wfn2Flow } from '@/credit/components/flow/utils'

import FlowElement from '@/credit/components/flow/element/install'
import FlowDnd from '@/credit/components/flow/element/dnd/install'
import '@/credit/components/flow/element/dnd/index.scss'

import IoPanel from '@/credit/components/flow/IoPanel'

const flowConfig = {
  stopScrollGraph: true,
  stopZoomGraph: true,
  metaKeyMultipleSelected: true,
  isSilentMode: false,
  hideAnchors: true,
  textEdit: false,
  grid: {
    type: 'dot',
    size: 10,
    visible: true,
    config: {
      color: '#eee',
    },
  },
  keyboard: {
    enabled: true,
  },
  snapline: true,
}

export default {
  components: {
    IoPanel,
  },
  props: {
    visible: {
      type: Boolean,
      default: true,
    },
    flowKey: String,
  },
  data() {
    return {
      loading: false,
      flowData: [],

      loaded: false,
      lf: null,
    }
  },
  computed: {},
  watch: {
    visible: {
      handler: function (val) {
        if (val) this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    async loadFlow() {
      if (this.loaded) return
      await loadLogicFlow(['Snapshot'])
      window.LogicFlow.use(FlowElement)
      if (!flowConfig.isSilentMode && !flowConfig.hideAnchors && flowConfig.textEdit) {
        window.LogicFlow.use(FlowDnd)
      }
      this.loaded = true
    },

    async flowRender(res) {
      await this.loadFlow()

      const { flowContainer } = this.$refs
      const { offsetWidth: width, offsetHeight: height } = flowContainer
      const lfData = wfn2Flow(res, width)

      if (!this.lf) {
        this.lf = new window.LogicFlow({
          ...flowConfig,
          container: flowContainer,
        })
      }

      // 重置缩放和位置
      this.lf.resetZoom()
      this.lf.focusOn({
        coordinate: { x: width / 2, y: height / 2 },
      })

      // 渲染流程
      this.lf.render(lfData)
    },

    getData() {
      this.reset()
      if (!this.flowKey) return
      this.loading = true
      getWfView({
        wfKey: this.flowKey,
      })
        .then(res => {
          // 当边上文字含有<或>时，导出图片失败。需要换成中文
          function rev(node) {
            if (node.branch_cond) {
              node.branch_cond = node.branch_cond
                .replace(/=/g, '等于')
                .replace(/>/g, '大于')
                .replace(/</g, '小于')
            }
            if (node.next_nodes && node.next_nodes.length) {
              for (const n of node.next_nodes) {
                rev(n)
              }
            }
          }
          rev(res)

          this.$emit('flow-data', res)
          this.$nextTick(() => this.flowRender(res))
        })
        .finally(() => {
          this.loading = false
        })
    },

    reset() {
      if (!this.lf) return
      this.lf.render({
        nodes: [],
        edges: [],
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.flow-container {
  height: 78vh;
  overflow: hidden;
}

.fl-wrap {
  position: relative;
  overflow: hidden;
}
</style>
